<template>

	<div id="details">
		<div v-if="!loading" class="loading">
			<mt-spinner type="fading-circle" color="skyblue" :size="60"></mt-spinner>
		</div>
		<div v-if="loading">

			<img :src="data.cover.origin" />
			<div class="film_intro">
				<div class="film_work1">影片介绍</div>
				<div class="film_work2">
					<span>导演：</span><span>{{data.director}}</span>
				</div>
				<div class="film_work2">
					<span>主演：</span><span v-for="item in data.actors">{{item.name}} | </span>
				</div>
				<div class="film_work2">
					<span>地区语言：</span><span>{{data.nation}}(<span>{{data.language}}</span>)</span>
				</div>
				<div class="film_work2">
					<span>类型：</span><span>{{data.category}}</span>
				</div>
				<div class="film_work2">
					<span>上映时间：</span><span>{{gettime(data.premiereAt)}}</span>
				</div>
				<div class="film_work3">
					<span>{{data.synopsis}}</span>
				</div>
			</div>
			<div class="operation" v-if="data.isNowPlaying!=''">
				<button>立即购票</button>
			</div>
		</div>

	</div>
</template>

<script>
	import axios from "axios";
	export default {
		created: function() {
			var film_id = this.$route.query.id
			console.log(film_id)
			axios.get("http://m.maizuo.com/v4/api/film/" + film_id, {

			}).then(function(res) {
				this.loading = true;
				this.data = res.data.data.film;
				this.$store.commit("toggleTitle", this.data.name)
			}.bind(this)).catch(function(err) {
				console.warn(err)
			});
		},
		data: function() {
			return {
				data: "",
				loading: false,
			}
		},
		methods: {
			gettime: function(time) {
				var time = new Date(time);
				return(time.getMonth() + 1) + "月" + time.getDate() + "日";
			},
		}
	}
</script>

<style lang="scss">
	@import "../scss/details.scss";
</style>